<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="汽车大厅" v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box ">
			
			<view class=" content-item">
				<u-swiper :list="swiper_list" :height="windowHeight"></u-swiper>
			</view>			
			<view class="bottom-posi">
				<button class="circle-btn" @click="show_mask = true">立即进入</button>
			</view>
			
			<!-- 弹窗 -->
			<u-mask :show="show_mask" :zoom="false">
				<view class="warp">
					<view class="mask-content bg-img">
						<view class="mask-box">
							<view class="text-them text-center">暂未开放 敬请期待</view>
							<view class="text-them margin-top-sm text-center"><text class="f22">您是否想要此功能？</text></view>
							<view class="margin-top-sm">
								<u-radio-group size="24"  active-color='#7C633F' @change="radioChange" class="flex justify-center">
									<u-radio label-size="24" name="非常需要">非常需要</u-radio>
									<u-radio label-size="24" name="需要">需要</u-radio>
									<u-radio label-size="24" name="不需要">不需要</u-radio>
								</u-radio-group>
							</view>
							<view class="btn-box">
								<view class="mask-btn" @click="show_mask = false">确认</view>
							</view>
						</view>
					</view>
					<u-icon style="margin-top: 50rpx;" name="close-circle" color="#ffffff" size="50" @click="show_mask = false"></u-icon>
				</view>
			</u-mask>


		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	
	</view>
</template>

<script>
export default {
	data() {
		return {
			swiper_list:["https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/fxt.png","https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/fxt.png"],
			windowHeight:"",
			show_mask:true,
		};
	},
	mounted () {
	    // 注意，这里要用个变量存this，不然进到getSystemInfo后this指向会变化，找不到data变量
	    var _this = this
	    uni.getSystemInfo({
			success: function (res) {
				_this.windowHeight = (res.windowHeight-240) * 2
			}
	    })
	},
	onShow() {
		
	},
	onLoad(e) {},
	methods: {
		radioChange(e){
			//console.log(e);
		},

	}
};
</script>

<style lang="scss" scoped>
.page_box {

}

.content_box {
	.bottom-posi{
		width: 100%;
		padding: 0 22rpx;
	}
	.circle-btn{
		background: #4a515b !important;
		color: #FFFFFF;
		border-radius: 45rpx;
		font-size: 30rpx;
		font-weight: 700;
		line-height: 90rpx;
		width: 100%;
		margin-top: 66rpx;
		font-family: PingFang SC, PingFang SC-Bold;
	}
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		height: 100%;
		.mask-content{
			background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210619135313.png);
			background-size: 100%;
			width: 85%;
			min-height: 700rpx;
			.mask-box{
				position: relative;
				top: 300rpx;
				padding: 30rpx;
				.text-them{
					color: #7c633f;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					line-height: 50rpx;
				}
				.btn-box{
					margin-top: 30rpx;
					text-align: center;
					.mask-btn{
						background: #ec7066;
						border-radius: 40rpx;
						padding: 20rpx 86rpx;
						color: white;
						font-size: 28rpx;
						text-align: center;
						display: inline-block;
					}
				}				
			}
		}
		.icon-btn{
			margin-top: 50rpx;
		}
	}
	/deep/.u-radio__label{
		color: #937852 !important;
	}
}
</style>
